<template>
    <div class="OrderPage">
        <el-row>
            <el-col :span="12" :offset="12" align="right">
                <el-button icon="el-icon-back" @click="btnClick()">返回列表</el-button>
            </el-col>
        </el-row>
        <div class="lists">
            <el-col :span="6" class="domainSelect">
                <h1>商城地址 ： {{domainInfo[0].domain}}</h1>
            </el-col>

            <!-- 域名信息 -->
            <el-table :data="domainInfo" stripe style="width: 100%">
                <el-table-column prop="language" label="页面语言" align="center"></el-table-column>
                <el-table-column prop="domain" label="主页地址" align="center"></el-table-column>
                <el-table-column prop="title" label="主页标题" align="center"></el-table-column>
                <el-table-column prop="seo_title" label="SEO标题" align="center"></el-table-column>
                <el-table-column prop="seo_desc" label="SEO描述" align="center"></el-table-column>
                <el-table-column prop="email" label="客户邮箱" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                            v-if="domainInfo[0].domain"
                            size="mini"
                            @click="handleClick(scope.row, 'edit')"
                        >编辑</el-button>
                        <el-button
                            v-if="scope.row.type == 'set' && scope.row.is_del == '0'"
                            size="mini"
                            type="danger"
                            @click="handleClick(scope.row, 'del')"
                        >打烊</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 轮播图 -->
        <div class="lists">
            <el-row>
                <el-col :span="4">
                    <h3>轮播图</h3>
                </el-col>
                <el-col :span="2" :offset="18" align="right">
                    <el-button type="primary" icon="el-icon-plus" @click="addBtnFn('slider')">添加</el-button>
                </el-col>
            </el-row>
            <p class="tips">商城顶部轮播图，支持多图添加，要求长宽尺寸一致，不添加不显示轮播图</p>
            <el-table :data="sliderData" stripe>
                <el-table-column prop="sort" label="序列" align="center" width="100"></el-table-column>
                <el-table-column prop="id" label="ID" align="center"></el-table-column>
                <el-table-column prop="title" label="标题" align="center"></el-table-column>
                <el-table-column prop="thumb" label="缩略图" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.thumb" width="60" alt />
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="200">
                    <template slot-scope="scope">
                        <div>
                            <el-button size="mini" @click="slideEdit(scope.row, 'edit')">编辑</el-button>
                            <el-button
                                size="mini"
                                type="danger"
                                @click="slideEdit(scope.row, 'del')"
                            >删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 产品分类 -->
        <div class="lists">
            <el-row>
                <el-col :span="4">
                    <h3>产品分类</h3>
                </el-col>
                <el-col :span="2" :offset="18" align="right">
                    <el-button type="primary" icon="el-icon-plus" @click="addClassFn">添加</el-button>
                </el-col>
            </el-row>
            <p class="tips">设置好分类后到建站编辑页面将产品设置到相应分类下面，最多支持设置二级分类</p>
            <el-table :data="proCateList" stripe>
                <el-table-column type="index" label="序列" align="center" width="60"></el-table-column>
                <el-table-column prop="id" label="ID" align="center"></el-table-column>
                <el-table-column prop="cate_img" label="缩略图" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.cate_img" width="60" alt />
                    </template>
                </el-table-column>
                <el-table-column prop="cate_name" label="模块名" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="classEdit(scope.row, 'edit')">编辑</el-button>
                        <el-button size="mini" type="danger" @click="classEdit(scope.row, 'del')">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 首页产品 -->
        <div class="lists">
            <el-row>
                <el-col :span="4">
                    <h3>首页产品</h3>
                </el-col>
                <!-- <el-col :span="2" :offset="18" align="right">
                    <el-button type="primary" icon="el-icon-plus" @click="addBtnFn('product')">添加</el-button>
                </el-col>-->
            </el-row>
            <!-- <p class="tips">不添加默认显示当前域名下的所有产品</p> -->
            <el-table :data="homeProList" stripe>
                <el-table-column type="index" label="序列" align="center" width="60"></el-table-column>
                <el-table-column prop="id" label="ID" align="center"></el-table-column>
                <el-table-column prop="pro_name_admin" label="标题" align="center"></el-table-column>
                <el-table-column prop="thumb" label="缩略图" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.thumb" width="60" alt />
                    </template>
                </el-table-column>
                <!-- <el-table-column label="操作" align="center" width="200">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type != 'set' && scope.row.is_del == 0">
                            <el-button size="mini" @click="slideEdit(scope.row, 'edit-home')">编辑</el-button>
                            <el-button
                                size="mini"
                                type="danger"
                                @click="slideEdit(scope.row, 'del')"
                            >删除</el-button>
                        </div>
                    </template>
                </el-table-column>-->
            </el-table>
        </div>

        <!-- 底部文章 -->
        <div class="lists">
            <el-row>
                <el-col :span="4">
                    <h3>底部文章</h3>
                </el-col>
                <el-col :span="2" :offset="18" align="right">
                    <router-link :to="'/NewArticle/new?domain=' + domainInfo[0].domain">
                        <el-button type="primary" icon="el-icon-plus">添加</el-button>
                    </router-link>
                </el-col>
            </el-row>
            <p class="tips">主要用于作为条款说明一栏，位于首页底部下方位置</p>
            <el-table :data="articleData" stripe>
                <el-table-column prop="sort" label="序列" width="100" align="center"></el-table-column>
                <el-table-column prop="id" label="ID" width="100" align="center"></el-table-column>
                <el-table-column prop="title" label="标题" align="center"></el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini">
                            <router-link :to="'/NewArticle/'+ scope.row.id">编辑</router-link>
                        </el-button>
                        <el-button size="mini" type="danger" @click="articleDel(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 轮播图设置弹框 -->
        <el-dialog :title="goodTypeText + '设置'" :visible.sync="sliderModel">
            <div class="dialog-body">
                <el-row>
                    <el-col :span="3">
                        <label>产品选择</label>
                    </el-col>
                    <el-col :span="20">
                        <div @click="showProFn" class="goodName">{{goodList.title}}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <label>域名</label>
                    </el-col>
                    <el-col :span="20">
                        <el-input placeholder="填写域名" v-model="goodList.domain"></el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <label>缩略图</label>
                    </el-col>
                    <el-col :span="20">
                        <el-upload
                            class="avatar-uploader"
                            :headers="myHeaders"
                            action="/api/Home/imgUpload"
                            :on-remove="handleRemove"
                            :show-file-list="false"
                            :on-success="handleSuccess"
                        >
                            <img v-if="goodImg" :src="goodImg" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-col>
                </el-row>
                <el-row v-if="goodType ==='slider'">
                    <el-col :span="3">
                        <label>描述</label>
                    </el-col>
                    <el-col :span="20">
                        <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="填写描述"
                            v-model="goodList.desc"
                        ></el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <label>排序</label>
                    </el-col>
                    <el-col :span="20">
                        <el-input-number v-model="goodList.sort" :min="1" :max="10"></el-input-number>(数值越大显示越靠前)
                    </el-col>
                </el-row>
            </div>
            <div slot="footer" class="dialog-footer" align="right">
                <el-button type="primary" size="small" @click="saveSlider" :loading="isUnclick">确定</el-button>
            </div>
        </el-dialog>

        <!-- 产品分类弹框 -->
        <el-dialog title="产品分类设置" :visible.sync="proClass">
            <div class="dialog-body">
                <el-row>
                    <el-col :span="3">
                        <label>菜单名</label>
                    </el-col>
                    <el-col :span="20">
                        <el-input placeholder="菜单名" v-model="classData.cate_name"></el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <label>缩略图</label>
                    </el-col>
                    <el-col :span="20">
                        <el-upload
                            class="avatar-uploader"
                            action="/api/Product/imgUpload"
                            :headers="myHeaders"
                            :show-file-list="false"
                            :on-success="proClassSuccess"
                        >
                            <img v-if="cate_img" :src="cate_img" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-col>
                </el-row>
            </div>
            <div slot="footer" class="dialog-footer" align="right">
                <el-button type="primary" size="small" @click="saveProClass">确定</el-button>
            </div>
        </el-dialog>

        <!-- 选择商品弹框 -->
        <el-dialog title="选择商品" :visible.sync="isShowPro" center>
            <div class="dialog_body">
                <el-table :data="proListData" border style="width: 100%">
                    <el-table-column prop="id" label="产品 ID" width="80" align="center"></el-table-column>
                    <el-table-column prop="thumb" label="缩略图" width="100" align="center">
                        <template slot-scope="scope">
                            <img :src="scope.row.thumb" width="40" height="40" alt />
                        </template>
                    </el-table-column>
                    <el-table-column prop="pro_name_admin" label="名称"></el-table-column>
                    <el-table-column label="操作" width="120" align="center">
                        <template slot-scope="scope">
                            <el-button size="small" @click="confirmFn(scope.row.id,scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="proListTotal"
                    @current-change="proPageChange"
                ></el-pagination>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Service from "../../services/main";
import { $local } from "../../assets/utils/utils";
export default {
    name: "OrderPage",
    data() {
        return {
            myHeaders: {
                cstoken: $local("userInfo").token
            },
            domain: "",
            domainList: [],
            domainInfo: [],
            sliderModel: false,
            productFlag: false,
            dialogVisible: false,
            orderNum: 1,
            sliderData: [],
            classList: [],
            classData: {},
            homePro: [],
            goodList: { title: "选择产品" },
            fileList: [],
            isShowPro: false,
            proClass: false,
            proClassType: "add",
            proListData: [],
            proListTotal: 0,
            isUnclick: false,
            goodType: "", // 判断是轮播图弹框还是产品弹框
            goodTypeText: "", // 弹框标题
            proCateList: [], // 分类选择数据
            cate_img: "",
            goodImg: "",
            homeProList: [],
            articleData: []
        };
    },
    created() {
        this.domainInfo = [{ domain: this.$route.params.site }];
        // this.getDomain();
        this.getHomeData();
        this.proCateListFn();
        this.getHomeLsitFn();
        this.getArticleFn();
    },
    methods: {
        //   获取数据
        getHomeData() {
            if (!this.domainInfo[0].domain) return;
            Service.getHomeList(this, {
                domain: this.domainInfo[0].domain
            }).then(res => {
                if (res.result.list.length !== 0) {
                    this.domainInfo = res.result.list;
                    this.getSliderData();
                }
            });
        },
        // // 获取产品数据
        // getDomain() {
        //     Service.getDomainList(this, {}).then(res => {
        //         let data = res.result;
        //         for (let key in data) {
        //             this.domainList.push({
        //                 label: data[key]
        //             });
        //         }
        //     });
        // },

        // 获取产品数据
        getData() {
            let params = {
                domain: "",
                page: "10"
            };
            Service.getHomeList(this, params).then(res => {
                this.tableData = res.result.list;
            });
        },

        // 获取 轮播图 列表
        getSliderData() {
            let params = {
                domain_id: this.domainInfo[0].id
            };
            Service.getBannerList(this, params).then(res => {
                this.sliderData = res.result;
            });
        },
        // 域名 编辑，删除
        handleClick(data, type) {
            if (type === "edit") {
                this.$router.push("/manage/edit/" + data.domain);
            } else if (type === "del") {
                this.$router.push("/manage/");
            }
        },

        // 新增或返回
        btnClick() {
            this.$router.go(-1);
        },

        // 轮播图弹框
        slideEdit(data, type) {
            if (type === "edit") {
                this.sliderModel = true;
                this.goodList = data;
            } else if (type === "del") {
                this.confirmDel(data.id);
            }
            this.goodList.domain = this.domainInfo[0].domain;
        },

        // 删除提示弹框
        confirmDel(id, type) {
            this.$confirm("是否确定删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    type === "class"
                        ? this.proCateDelFn(id)
                        : this.bannerDelFn(id);
                })
                .catch(() => {});
        },

        // 删除轮播图
        bannerDelFn(id) {
            Service.bannerDel(this, { id: id }).then(res => {
                if (res.errorMsg === "success") {
                    this.getSliderData();
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                }
            });
        },

        // 删除产品分类
        proCateDelFn(id) {
            Service.proCateDel(this, { id: id }).then(res => {
                if (res.errorMsg === "success") {
                    this.proCateListFn();
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                }
            });
        },

        // 显示商品弹框
        showProFn() {
            if (this.goodType === "slider") {
                Service.bannerAddProList(this, {
                    domain: this.domainInfo[0].domain
                }).then(res => {
                    this.isShowPro = true;
                    this.proListData = res.result;
                });
            } else if (this.goodType === "product") {
                // this.getHomeLsitFn();
            }
        },

        // 获取首页产品
        getHomeLsitFn() {
            Service.getHomeProList(this, {
                domain: this.domainInfo[0].domain,
                limit: 0
            }).then(res => {
                // this.isShowPro = true;
                this.homeProList = res.result;
            });
        },

        // 选择轮播图列表
        confirmFn(id, data) {
            this.isShowPro = false;
            this.goodList.title = data.pro_name_admin;
            this.goodList.domain = data.domain;
            this.goodList.thumb = data.thumb;
            this.goodList.pro_id = data.id;
            this.goodImg = data.thumb;
        },

        // 上传轮播图图片
        handleSuccess(res) {
            if (res.errorMsg === "success") {
                this.goodImg = res.result.path;
                this.homeData.logo = this.goodImg;
            }
        },

        // 保存轮播图
        saveSlider() {
            if (this.isUnclick) return;
            this.isUnclick = true;
            let params = {
                domain_id: this.domainInfo[0].id,
                pro_id: this.goodList.pro_id,
                title: this.goodList.title,
                thumb: this.goodList.thumb,
                desc: this.goodList.desc,
                sort: this.goodList.sort
            };
            Service.bannerAdd(this, params).then(res => {
                if (res.errorMsg === "success") {
                    this.sliderModel = false;
                    this.getSliderData();
                    this.goodList = {};
                    this.isUnclick = false;
                }
            });
        },

        // 点击显示新增分类弹框
        addClassFn() {
            this.proClassType = "add";
            this.proClass = true;
            this.classData = {};
            this.cate_img = "";
        },

        // 添加首页产品
        addBtnFn(type) {
            this.sliderModel = true;
            this.goodList = {};
            this.goodType = type;
            this.goodTypeText === "slider"
                ? (this.goodTypeText = "轮播图")
                : (this.goodTypeText = "产品");
        },

        // 轮播图缩略图上传
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },

        // 排序
        handleChange(value) {
            console.log(value);
        },

        //
        proPageChange() {},

        // 产品分类列表操作
        classEdit(data, type) {
            if (type === "edit") {
                this.proClass = true;
                this.proClassType = "edit";
                this.classData = data;
                this.cate_img = data.cate_img;
            } else if (type === "del") {
                this.confirmDel(data.id, "class");
            }
        },

        // 获取产品分类列表
        proCateListFn() {
            Service.getProCateList(this, {}).then(res => {
                this.proCateList = res.result;
            });
        },

        // 产品分类图片上传成功回调
        proClassSuccess(res) {
            if (res.errorMsg === "success") {
                this.cate_img = res.result.path;
                this.classData.cate_img = this.cate_img;
            }
        },

        // 产品分类添加保存
        saveProClass() {
            if (this.proClassType == "add") {
                Service.proCateAdd(this, this.classData).then(res => {
                    if (res.errorMsg === "success") {
                        this.proClass = false;
                        this.$message({
                            type: "success",
                            message: "保存成功!"
                        });
                        this.proCateListFn();
                    }
                });
            } else {
                Service.proCateEdit(this, this.classData).then(res => {
                    if (res.errorMsg === "success") {
                        this.proClass = false;
                        this.$message({
                            type: "success",
                            message: "保存成功!"
                        });
                        this.proCateListFn();
                    }
                });
            }
        },

        // 获取文章列表
        getArticleFn() {
            let params = {
                domain: this.domainInfo[0].domain
            };
            this.articleData = [];
            Service.getArticle(this, params).then(res => {
                let data = res.result.list;
                data.forEach(item => {
                    if (item.is_del !== 2) {
                        this.articleData.push(item);
                    }
                });
            });
        },

        // 底部文章删除
        articleDel(id) {
            Service.delArticle(this, { id: id }).then(res => {
                if (res.errorCode == "0") {
                    this.$message({ message: "删除成功！", type: "warning" });
                    this.getArticleFn();
                }
            });
        }
    }
};
</script>

<style lang="scss">
.OrderPage {
    .lists {
        margin-top: 30px;
        h3 {
            font-weight: bold;
            font-size: 18px;
            line-height: 40px;
        }
    }
    .el-dialog {
        width: 40%;
    }
    .dialog-body {
        .el-row {
            line-height: 40px;
            margin-bottom: 10px;
            .el-col-3 {
                text-align: center;
            }
        }
    }
    .domainSelect {
        margin-bottom: 15px;
    }
    .tips {
        margin-bottom: 10px;
        font-size: 16px;
        color: #999;
    }
    .goodName {
        width: 100%;
        height: 42px;
        line-height: 48px;
        text-indent: 15px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        cursor: pointer;
    }

    .avatar {
        width: 160px;
        max-height: 160px;
    }
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 160px;
    height: 160px;
}
.avatar-uploader .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 160px;
    height: 160px;
    line-height: 160px;
    text-align: center;
}
</style>